<script setup>
import Minhouse from "./minmore/minhouse.vue"
import { ref, reactive, getCurrentInstance, computed, onMounted, watch, defineEmits, defineProps } from "vue"
const { proxy } = getCurrentInstance()
let req = getCurrentInstance()
let emit = defineEmits()
let lens = ref()

// 接收刷选人数 位置区域 价格
let obj = defineProps(['pepnums', 'isfrees', 'areas', 'lowprice', 'highprice','light'])

let page = ref(1)
let msg = ref(true)
let prevpage = (val) => {
    page.value = val
}
let nextpage = (val) => {

    page.value = val
}
let pagechange = (val) => {

    page.value = val
}
// 侦听page
watch(page, (v, n) => {
    if (v > 1) {
        msg.value = false
    } else {
        msg.value = true
    }
})

// 计算总数
let houselen = ref()
let total = (num) => {
    houselen.value = num
    emit("houselen", houselen)
}
// 显示第几个
let from = ref()
let to = ref()
let fromto = (arg1, arg2) => {
    from.value = arg1
    to.value = arg2
}
//中转地图数据
let mapdata = (arg) => {
    emit("mapdata", arg)
}
// 中转wish心愿
let wish=(flag,hid)=>{
    emit("wish",flag,hid)
}
// 中转关闭窗口信号

</script>

<template>
    <div class="housebox">
        <div class="text" v-show="msg">
            <img src="../img/text.gif" alt="" />
            <div>
                <div><i>马上就要出门旅行了使用</i>「闪订」筛选条件，查看可即时预订的房源。</div>
            </div>

        </div>
        <h2 v-show="msg">{{houselen}}家住宿</h2>
        <Minhouse :pepnums="obj.pepnums" :page="page" :isfrees="obj.isfrees" :areas="obj.areas" :lowprice="obj.lowprice"
            :highprice="obj.highprice" @total="total" @from="fromto" @mapdata="mapdata" @wish="wish" :light="obj.light" ></Minhouse>

        <el-pagination @prev-click="prevpage" @next-click="nextpage" @current-change="pagechange" background
            layout="prev, pager, next" :total="100" />

        <div class="bottom">
            <p>第{{from}}~{{to}}个房源,共{{houselen}}个</p>
            <p class="last">包含额外附加费用及适用税费。</p>
        </div>
    </div>
</template>

<style scoped="scoped" lang="scss">
.housebox {
    position: relative;
    top: 40px;
    width: 60%;
    // height: 500px;
    display: flex;
    justify-content: center;
    align-content: space-around;
    flex-wrap: wrap;

    .text {
        width: 95%;
        height: 80px;
        display: flex;
        align-content: center;
        justify-content: flex-start;
        flex-wrap: nowrap;

        img {
            margin-top: 25px;
            width: 40px;
            height: 40px;
        }

        div {
            width: 80%;
            display: flex;
            justify-content: space-around;
            align-items: center;

        }

    }

    h2 {
        position: relative;
        right: 370px;
    }

    .bottom {
        width: 100%;
        text-align: center;

        .last {
            font-size: 14px;
            color: #717171;
        }
    }
}
</style>